```jsx
import React, { useState, useEffect } from "react";

const App = () => {
  const [selectedLetters, setSelectedLetters] = useState([]);
  const [currentWord, setCurrentWord] = useState("");
  const [showAnswer, setShowAnswer] = useState(false);
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentCvcWord, setCurrentCvcWord] = useState(null);
  const [wordIndex, setWordIndex] = useState(0);
  const [feedback, setFeedback] = useState("");
  const [showFeedback, setShowFeedback] = useState(false);
  const [showLevelSelector, setShowLevelSelector] = useState(false);
  const [currentLevel, setCurrentLevel] = useState(1);
  const [showWordList, setShowWordList] = useState(false);
  const [mode, setMode] = useState("free"); // "challenge" or "free"
  const [freeWord, setFreeWord] = useState("");
  const [selectedWordForPronunciation, setSelectedWordForPronunciation] = useState("");

  // CVC单词数据库
  const cvcWords = [
    { word: "bag", ipa: "/bæɡ/", letters: ["b", "a", "g"] },
    { word: "bed", ipa: "/bed/", letters: ["b", "e", "d"] },
    { word: "met", ipa: "/met/", letters: ["m", "e", "t"] },
    { word: "cat", ipa: "/kæt/", letters: ["c", "a", "t"] },
    { word: "cop", ipa: "/kɒp/", letters: ["c", "o", "p"] },
    { word: "fig", ipa: "/fɪɡ/", letters: ["f", "i", "g"] },
    { word: "hum", ipa: "/hʌm/", letters: ["h", "u", "m"] },
    { word: "tug", ipa: "/tʌɡ/", letters: ["t", "u", "g"] },
    { word: "mat", ipa: "/mæt/", letters: ["m", "a", "t"] },
    { word: "beg", ipa: "/beɡ/", letters: ["b", "e", "g"] },
    { word: "job", ipa: "/dʒɒb/", letters: ["j", "o", "b"] },
    { word: "map", ipa: "/mæp/", letters: ["m", "a", "p"] },
    { word: "hot", ipa: "/hɒt/", letters: ["h", "o", "t"] },
    { word: "dog", ipa: "/dɒɡ/", letters: ["d", "o", "g"] },
    { word: "run", ipa: "/rʌn/", letters: ["r", "u", "n"] },
    { word: "sad", ipa: "/sæd/", letters: ["s", "a", "d"] },
    { word: "pat", ipa: "/pæt/", letters: ["p", "a", "t"] },
    { word: "fog", ipa: "/fɒɡ/", letters: ["f", "o", "g"] },
    { word: "fan", ipa: "/fæn/", letters: ["f", "a", "n"] },
    { word: "fit", ipa: "/fɪt/", letters: ["f", "i", "t"] },
    { word: "tub", ipa: "/tʌb/", letters: ["t", "u", "b"] },
    { word: "jet", ipa: "/dʒet/", letters: ["j", "e", "t"] },
    { word: "fox", ipa: "/fɒks/", letters: ["f", "o", "x"] },
    { word: "pin", ipa: "/pɪn/", letters: ["p", "i", "n"] },
    { word: "cut", ipa: "/kʌt/", letters: ["c", "u", "t"] },
    { word: "gum", ipa: "/ɡʌm/", letters: ["g", "u", "m"] },
    { word: "jug", ipa: "/dʒʌɡ/", letters: ["j", "u", "g"] },
    { word: "pod", ipa: "/pɒd/", letters: ["p", "o", "d"] },
    { word: "tab", ipa: "/tæb/", letters: ["t", "a", "b"] },
    { word: "ten", ipa: "/ten/", letters: ["t", "e", "n"] },
    { word: "bus", ipa: "/bʌs/", letters: ["b", "u", "s"] },
    { word: "win", ipa: "/wɪn/", letters: ["w", "i", "n"] },
    { word: "mop", ipa: "/mɒp/", letters: ["m", "o", "p"] },
    { word: "bat", ipa: "/bæt/", letters: ["b", "a", "t"] },
    { word: "bet", ipa: "/bet/", letters: ["b", "e", "t"] },
    { word: "rat", ipa: "/ræt/", letters: ["r", "a", "t"] },
    { word: "lap", ipa: "/læp/", letters: ["l", "a", "p"] },
    { word: "nap", ipa: "/næp/", letters: ["n", "a", "p"] },
    { word: "pan", ipa: "/pæn/", letters: ["p", "a", "n"] },
    { word: "log", ipa: "/lɒɡ/", letters: ["l", "o", "g"] },
    { word: "hat", ipa: "/hæt/", letters: ["h", "a", "t"] },
    { word: "pot", ipa: "/pɒt/", letters: ["p", "o", "t"] },
    { word: "bug", ipa: "/bʌɡ/", letters: ["b", "u", "g"] },
    { word: "top", ipa: "/tɒp/", letters: ["t", "o", "top"] },
    { word: "cup", ipa: "/kʌp/", letters: ["c", "u", "p"] },
    { word: "jut", ipa: "/dʒʌt/", letters: ["j", "u", "t"] },
    { word: "nod", ipa: "/nɒd/", letters: ["n", "o", "d"] },
    { word: "mom", ipa: "/mɒm/", letters: ["m", "o", "m"] },
    { word: "can", ipa: "/kæn/", letters: ["c", "a", "n"] },
    { word: "rug", ipa: "/rʌɡ/", letters: ["r", "u", "g"] },
    { word: "mum", ipa: "/mʌm/", letters: ["m", "u", "m"] },
    { word: "hut", ipa: "/hʌt/", letters: ["h", "u", "t"] },
    { word: "mud", ipa: "/mʌd/", letters: ["m", "u", "mud"] },
    { word: "Ben", ipa: "/ben/", letters: ["B", "e", "n"] },
    { word: "sit", ipa: "/sɪt/", letters: ["s", "i", "t"] },
    { word: "Rob", ipa: "/rɒb/", letters: ["R", "o", "b"] },
    { word: "pox", ipa: "/pɒks/", letters: ["p", "o", "x"] },
    { word: "hug", ipa: "/hʌɡ/", letters: ["h", "u", "g"] },
    { word: "hit", ipa: "/hɪt/", letters: ["h", "i", "t"] },
    { word: "max", ipa: "/mæks/", letters: ["m", "a", "x"] },
    { word: "six", ipa: "/sɪks/", letters: ["s", "i", "x"] },
    { word: "van", ipa: "/væn/", letters: ["v", "a", "n"] },
    { word: "cap", ipa: "/kæp/", letters: ["c", "a", "p"] },
    { word: "box", ipa: "/bɒks/", letters: ["b", "o", "x"] },
    { word: "tag", ipa: "/tæɡ/", letters: ["t", "a", "g"] },
    { word: "leg", ipa: "/leɡ/", letters: ["l", "e", "g"] },
    { word: "tad", ipa: "/tæd/", letters: ["t", "a", "d"] },
    { word: "lid", ipa: "/lɪd/", letters: ["l", "i", "d"] },
    { word: "sun", ipa: "/sʌn/", letters: ["s", "u", "n"] },
    { word: "lip", ipa: "/lɪp/", letters: ["l", "i", "p"] },
    { word: "dad", ipa: "/dæd/", letters: ["d", "a", "d"] },
    { word: "lox", ipa: "/lɒks/", letters: ["l", "o", "x"] },
    { word: "dip", ipa: "/dɪp/", letters: ["d", "i", "p"] },
    { word: "zag", ipa: "/zæɡ/", letters: ["z", "a", "g"] },
    { word: "hop", ipa: "/hɒp/", letters: ["h", "o", "p"] },
    { word: "bum", ipa: "/bʌm/", letters: ["b", "u", "m"] },
    { word: "pet", ipa: "/pet/", letters: ["p", "e", "t"] },
    { word: "dot", ipa: "/dɒt/", letters: ["d", "o", "t"] },
    { word: "net", ipa: "/net/", letters: ["n", "e", "t"] },
    { word: "big", ipa: "/bɪɡ/", letters: ["b", "i", "g"] },
    { word: "sop", ipa: "/sɒp/", letters: ["s", "o", "p"] },
    { word: "pop", ipa: "/pɒp/", letters: ["p", "o", "p"] },
    { word: "vet", ipa: "/vet/", letters: ["v", "e", "t"] },
    { word: "mug", ipa: "/mʌɡ/", letters: ["m", "u", "g"] },
    { word: "jog", ipa: "/dʒɒɡ/", letters: ["j", "o", "g"] },
    { word: "hog", ipa: "/hɒɡ/", letters: ["h", "o", "g"] },
    { word: "kit", ipa: "/kɪt/", letters: ["k", "i", "t"] },
    { word: "hen", ipa: "/hen/", letters: ["h", "e", "n"] },
    { word: "wed", ipa: "/wed/", letters: ["w", "e", "d"] },
    { word: "wet", ipa: "/wet/", letters: ["w", "e", "t"] },
    { word: "ran", ipa: "/ræn/", letters: ["r", "a", "n"] },
    { word: "pig", ipa: "/pɪɡ/", letters: ["p", "i", "g"] },
    { word: "bun", ipa: "/bʌn/", letters: ["b", "u", "n"] },
    { word: "pen", ipa: "/pen/", letters: ["p", "e", "n"] },
    { word: "cod", ipa: "/kɒd/", letters: ["c", "o", "d"] },
    { word: "zip", ipa: "/zɪp/", letters: ["z", "i", "p"] },
    { word: "lug", ipa: "/lʌɡ/", letters: ["l", "u", "g"] },
    { word: "fix", ipa: "/fɪks/", letters: ["f", "i", "x"] },
    { word: "mob", ipa: "/mɒb/", letters: ["m", "o", "b"] },
    { word: "bit", ipa: "/bɪt/", letters: ["b", "i", "t"] }
  ];

  // 有意义的单词列表（用于练习版检查）
  const validWords = cvcWords.map(wordObj => wordObj.word.toLowerCase());

  // 将单词分为10个关卡
  const levels = Array.from({ length: 10 }, (_, i) => ({
    level: i + 1,
    words: cvcWords.slice(i * 10, (i + 1) * 10)
  }));

  // 字母发音映射
  const letterSounds = {
    a: "æ", b: "b", c: "k", d: "d", e: "e", f: "f", 
    g: "ɡ", h: "h", i: "ɪ", j: "dʒ", k: "k", l: "l", 
    m: "m", n: "n", o: "ɒ", p: "p", q: "kw", r: "r", 
    s: "s", t: "t", u: "ʌ", v: "v", w: "w", x: "ks", 
    y: "j", z: "z"
  };

  // 音标到音频文件的映射
  const ipaToAudioMap = {
    "æ": "a",
    "b": "b",
    "k": "c",
    "d": "d",
    "e": "e",
    "f": "f",
    "ɡ": "g",
    "h": "h",
    "ɪ": "i",
    "dʒ": "j",
    "l": "l",
    "m": "m",
    "n": "n",
    "ɒ": "o",
    "p": "p",
    "r": "r",
    "s": "s",
    "t": "t",
    "ʌ": "u",
    "v": "v",
    "w": "w",
    "ks": "x",
    "j": "y",
    "z": "z"
  };

  useEffect(() => {
    if (levels.length > 0 && mode === "challenge") {
      setCurrentCvcWord(levels[0].words[0]);
    }
  }, [mode]);

  const nextWord = () => {
    if (mode !== "challenge") return;
    const words = levels[currentLevel - 1].words;
    const nextIndex = (wordIndex + 1) % words.length;
    setWordIndex(nextIndex);
    setCurrentCvcWord(words[nextIndex]);
    setSelectedLetters([]);
    setCurrentWord("");
    setShowAnswer(false);
    setFeedback("");
    setShowFeedback(false);
  };

  const prevWord = () => {
    if (mode !== "challenge") return;
    const words = levels[currentLevel - 1].words;
    const prevIndex = wordIndex === 0 ? words.length - 1 : wordIndex - 1;
    setWordIndex(prevIndex);
    setCurrentCvcWord(words[prevIndex]);
    setSelectedLetters([]);
    setCurrentWord("");
    setShowAnswer(false);
    setFeedback("");
    setShowFeedback(false);
  };

  const handleLetterClick = (letter) => {
    playLetterSound(letter);
    if (mode === "challenge") {
      if (selectedLetters.length < 3 && !selectedLetters.includes(letter)) {
        setSelectedLetters([...selectedLetters, letter]);
        setCurrentWord(prev => prev + letter);
      }
    } else {
      if (freeWord.length < 3) {
        setFreeWord(prev => prev + letter);
      }
    }
  };

  const handleDragStart = (e, letter) => {
    e.dataTransfer.setData("text/plain", letter);
  };

  const handleDrop = (e, index) => {
    e.preventDefault();
    const letter = e.dataTransfer.getData("text/plain");
    if (mode === "challenge") {
      if (selectedLetters.length <= index && !selectedLetters.includes(letter)) {
        const newSelected = [...selectedLetters];
        newSelected[index] = letter;
        setSelectedLetters(newSelected);
        setCurrentWord(newSelected.filter(l => l).join(''));
      }
    }
  };

  const handleDragOver = (e) => {
    e.preventDefault();
  };

  const removeLetter = (index) => {
    if (mode === "challenge") {
      const newSelected = [...selectedLetters];
      newSelected.splice(index, 1);
      setSelectedLetters(newSelected);
      setCurrentWord(newSelected.filter(l => l).join(''));
    } else {
      setFreeWord(prev => prev.slice(0, -1));
    }
  };

  const resetGame = () => {
    if (mode === "challenge") {
      setSelectedLetters([]);
      setCurrentWord("");
    } else {
      setFreeWord("");
    }
    setShowAnswer(false);
    setFeedback("");
    setShowFeedback(false);
  };

  const selectLevel = (level) => {
    setCurrentLevel(level);
    setWordIndex(0);
    setCurrentCvcWord(levels[level - 1].words[0]);
    setSelectedLetters([]);
    setCurrentWord("");
    setShowAnswer(false);
    setFeedback("");
    setShowFeedback(false);
    setShowLevelSelector(false);
  };

  // 自动检查答案
  useEffect(() => {
    if (mode === "challenge" && currentWord.length === 3 && currentCvcWord) {
      if (currentWord.toLowerCase() === currentCvcWord.word.toLowerCase()) {
        setFeedback("🎉 太棒了！答案正确！");
        setShowFeedback(true);
        setShowAnswer(true);
      } else {
        setFeedback("❌ 不对哦，再试试看！");
        setShowFeedback(true);
        setTimeout(() => setShowFeedback(false), 2000);
      }
    }
  }, [currentWord, currentCvcWord, mode]);

  const getLetterColor = (letter) => {
    const colors = {
      a: 'bg-red-200', b: 'bg-blue-200', c: 'bg-yellow-200', 
      d: 'bg-green-200', e: 'bg-teal-200', f: 'bg-blue-200',
      g: 'bg-blue-200', h: 'bg-purple-200', i: 'bg-pink-200',
      j: 'bg-red-300', k: 'bg-orange-300', l: 'bg-yellow-300',
      m: 'bg-green-300', n: 'bg-teal-300', o: 'bg-blue-300',
      p: 'bg-indigo-300', q: 'bg-purple-300', r: 'bg-pink-300',
      s: 'bg-red-400', t: 'bg-orange-400', u: 'bg-yellow-400',
      v: 'bg-green-400', w: 'bg-teal-400', x: 'bg-blue-400',
      y: 'bg-indigo-400', z: 'bg-purple-400'
    };
    return colors[letter] || 'bg-gray-200';
  };

  const switchMode = (newMode) => {
    setMode(newMode);
    resetGame();
    if (newMode === "challenge") {
      setCurrentCvcWord(levels[0].words[0]);
    }
  };

  // 获取单词的IPA音标
  const getWordIPA = (word) => {
    const foundWord = cvcWords.find(w => w.word.toLowerCase() === word.toLowerCase());
    return foundWord ? foundWord.ipa : "";
  };

  // 播放单词发音
  const playWordPronunciation = (word) => {
    setSelectedWordForPronunciation(word);
    const audio = new Audio(`https://dict.youdao.com/dictvoice?audio=${word}&type=2`);
    audio.play().catch(e => console.log("音频播放失败:", e));
  };

  // 播放字母发音
  const playLetterSound = (letter) => {
    const audio = new Audio(`https://raw.githubusercontent.com/Lichong-123-LTR/Phonics-/main/${letter.toLowerCase()}.mp3`);
    audio.play().catch(e => console.log("音频播放失败:", e));
  };

  // 播放音标发音
  const playIpaSound = (ipa) => {
    // 移除斜杠
    const cleanIpa = ipa.replace(/\//g, '');
    // 查找对应的音频文件
    const audioFile = ipaToAudioMap[cleanIpa];
    if (audioFile) {
      const audio = new Audio(`https://raw.githubusercontent.com/Lichong-123-LTR/Phonics-/main/${audioFile}.mp3`);
      audio.play().catch(e => console.log("音频播放失败:", e));
    }
  };

  if (mode === "challenge" && !currentCvcWord) {
    return <div className="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 flex items-center justify-center">
      <div className="text-2xl text-indigo-600">加载中...</div>
    </div>;
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 p-4">
      <div className="max-w-6xl mx-auto">
        {/* Header */}
        <div className="text-center mb-8 pt-8">
          <h1 className="text-4xl font-bold text-indigo-800 mb-2">
            虫妈LTR自然拼读
          </h1>
          {/* Mode Switch */}
          <div className="flex justify-center space-x-4 mb-4">
            <button
              onClick={() => switchMode("free")}
              className={`px-6 py-2 rounded-lg font-semibold transition-colors duration-200 ${
                mode === "free" 
                  ? 'bg-indigo-600 text-white' 
                  : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
              }`}
            >
              练习模式
            </button>
            <button
              onClick={() => switchMode("challenge")}
              className={`px-6 py-2 rounded-lg font-semibold transition-colors duration-200 ${
                mode === "challenge" 
                  ? 'bg-indigo-600 text-white' 
                  : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
              }`}
            >
              闯关模式
            </button>
          </div>
        </div>

        {mode === "challenge" ? (
          <>
            {/* Main Game Area */}
            <div className="bg-white rounded-2xl shadow-xl p-8 mb-8">
              {/* Word Display and Controls - 左右分栏布局 */}
              <div className="flex gap-8">
                {/* 左侧区域 - 占据一半宽度 */}
                <div className="w-1/2">
                  {/* Word Navigation */}
                  <div className="flex justify-center items-center mb-6">
                    <button
                      onClick={prevWord}
                      className="bg-indigo-100 hover:bg-indigo-200 text-indigo-700 px-6 py-2 rounded-lg font-semibold transition-colors duration-200 mr-4"
                    >
                      ←
                    </button>
                    
                    <div className="text-center mx-4">
                      <div className="text-4xl font-bold text-indigo-700" style={{ width: '68px', margin: '0 auto' }}>
                        {currentCvcWord.word}
                      </div>
                    </div>
                    
                    <button
                      onClick={nextWord}
                      className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg font-semibold transition-colors duration-200 ml-4"
                    >
                      →
                    </button>
                  </div>

                  {/* Letter Slots - 蓝红蓝背景色 */}
                  <div className="flex space-x-3 mb-6 justify-center">
                    {[0, 1, 2].map((index) => (
                      <div
                        key={index}
                        className={`w-20 h-20 border-2 ${
                          index === 0 || index === 2 ? 'border-blue-400 bg-blue-100' : 'border-red-400 bg-red-100'
                        } flex items-center justify-center text-3xl font-bold cursor-pointer transition-all duration-200 hover:bg-gray-50 rounded-lg shadow-md`}
                        onDrop={(e) => handleDrop(e, index)}
                        onDragOver={handleDragOver}
                        onClick={() => selectedLetters[index] && removeLetter(index)}
                      >
                        {selectedLetters[index] || (
                          <span className="text-gray-400 text-2xl">_</span>
                        )}
                      </div>
                    ))}
                  </div>

                  {/* IPA Sound Boxes - 字体增大2号，并上下左右居中 */}
                  <div className="flex space-x-3 mb-6 justify-center">
                    {[0, 1, 2].map((index) => (
                      <div 
                        key={index}
                        className={`bg-blue-50 border-2 border-blue-300 p-3 rounded-lg text-center cursor-pointer hover:bg-blue-100 transition-colors duration-200 w-20 ${
                          index === 1 ? 'bg-red-50 border-red-300 hover:bg-red-100' : ''
                        }`}
                        style={{ height: '80px' }}
                        onClick={() => currentWord.length === 3 && playIpaSound(`/${letterSounds[currentCvcWord.letters[index]]}/`)}
                      >
                        {currentWord.length === 3 ? (
                          <div className="text-xl font-bold flex items-center justify-center h-full">/{letterSounds[currentCvcWord.letters[index]]}/</div>
                        ) : (
                          <div className="flex items-center justify-center h-full">
                            <span className="text-gray-400 text-2xl">_</span>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>

                {/* 右侧区域 - 占据一半宽度 */}
                <div className="w-1/2">
                  {/* Level Selector and Word List Controls */}
                  <div className="flex justify-end items-center mb-6">
                    <div className="text-right">
                      <div className="flex justify-end space-x-2">
                        <button
                          onClick={() => setShowWordList(!showWordList)}
                          className="bg-purple-100 hover:bg-purple-200 text-purple-700 px-4 py-2 rounded-lg font-semibold transition-colors duration-200 text-lg"
                        >
                          {showWordList ? '隐藏单词列表' : '显示单词列表'}
                        </button>
                        <button
                          onClick={() => setShowLevelSelector(!showLevelSelector)}
                          className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg font-semibold transition-colors duration-200"
                          style={{ width: '120px' }}
                        >
                          选择关卡
                        </button>
                      </div>
                    </div>
                  </div>

                  {/* Feedback Area - 一直显示，未拼词时只显示背景色，高度增高1/10，所有文字字号减小4个字号 */}
                  <div className="mt-6">
                    <div className={`p-6 rounded-xl border-2 ${
                      showAnswer ? 'bg-yellow-50 border-yellow-200' : 'bg-gray-100 border-gray-200'
                    }`} style={{ height: '176px' }}>
                      {showFeedback && (
                        <div className={`mb-2 p-3 rounded-lg font-semibold ${
                          feedback.includes('太棒了') ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'
                        }`} style={{ height: '40px' }}>
                          <div className="flex items-center">
                            <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                            </svg>
                            <span className="text-sm">{feedback}</span>
                          </div>
                        </div>
                      )}

                      {showAnswer && (
                        <div className="text-center">
                          <button
                            onClick={() => playWordPronunciation(currentCvcWord.word)}
                            className="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-1 rounded-lg font-semibold transition-colors duration-200 flex items-center mx-auto mb-3 text-sm"
                            style={{ height: '35px' }}
                          >
                            <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.106A1 1 0 008 8v4a1 1 0 001.555.894l3-2a1 1 0 000-1.788l-3-2z" clipRule="evenodd" />
                            </svg>
                            听发音
                          </button>
                          {/* 重新开始按钮移动到听发音下方，字号减小，高度减小1/3 */}
                          <button
                            onClick={resetGame}
                            className="bg-gray-500 hover:bg-gray-600 text-white px-4 py-1 rounded-lg font-semibold transition-colors duration-200 mx-auto block text-sm"
                            style={{ height: '30px' }}
                          >
                            🔄 重新开始
                          </button>
                        </div>
                      )}

                      {/* 未拼词时显示空白内容 */}
                      {!showAnswer && !showFeedback && (
                        <div className="text-center text-gray-400 h-full flex flex-col items-center justify-center">
                          <div className="text-3xl mb-2">?</div>
                          <div className="text-base">等待拼词结果</div>
                          {/* 重新开始按钮在未拼词时也显示，字号减小，高度减小1/3 */}
                          <button
                            onClick={resetGame}
                            className="bg-gray-500 hover:bg-gray-600 text-white px-4 py-1 rounded-lg font-semibold transition-colors duration-200 mx-auto block mt-4 text-sm"
                            style={{ height: '30px' }}
                          >
                            🔄 重新开始
                          </button>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              </div>

              {/* Level Selector Modal */}
              {showLevelSelector && (
                <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
                  <div className="bg-white rounded-2xl p-6 max-w-4xl w-full mx-4 max-h-96 overflow-y-auto">
                    <div className="flex justify-between items-center mb-4">
                      <h3 className="text-xl font-bold text-indigo-800">选择关卡</h3>
                      <button
                        onClick={() => setShowLevelSelector(false)}
                        className="text-gray-500 hover:text-gray-700 text-2xl"
                      >
                        ×
                      </button>
                    </div>
                    <div className="grid grid-cols-5 gap-4">
                      {levels.map((levelData) => (
                        <button
                          key={levelData.level}
                          onClick={() => selectLevel(levelData.level)}
                          className={`p-4 rounded-lg font-semibold transition-colors duration-200 ${
                            currentLevel === levelData.level
                              ? 'bg-indigo-600 text-white'
                              : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
                          }`}
                        >
                          第{levelData.level}关
                        </button>
                      ))}
                    </div>
                  </div>
                </div>
              )}

              {/* Word List - 悬浮显示，长度改为1.2倍 */}
              {showWordList && (
                <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
                  <div className="bg-white rounded-2xl p-6 max-w-4xl w-full mx-4 max-h-96 overflow-y-auto" style={{ width: '120%' }}>
                    <div className="flex justify-between items-center mb-4">
                      <h3 className="text-xl font-bold text-indigo-800">单词列表</h3>
                      <button
                        onClick={() => setShowWordList(false)}
                        className="text-gray-500 hover:text-gray-700 text-2xl"
                      >
                        ×
                      </button>
                    </div>
                    <div className="grid grid-cols-5 gap-2">
                      {levels[currentLevel - 1].words.map((wordObj, index) => (
                        <div 
                          key={index} 
                          className="text-center p-2 bg-white rounded border cursor-pointer hover:bg-gray-100 transition-colors duration-200"
                          style={{ width: '50%' }} // 单词内容框长度改为0.5倍
                          onClick={() => playWordPronunciation(wordObj.word)} // 点击单词发音
                        >
                          <div className="font-bold text-sm">{wordObj.word}</div>
                          <div className="text-xs text-gray-500">{wordObj.ipa}</div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              )}
              
              {/* Letters Grid */}
              <div className="grid grid-cols-7 gap-3 mt-8">
                {Object.keys(letterSounds).map((letter) => (
                  <div
                    key={letter}
                    draggable
                    onDragStart={(e) => handleDragStart(e, letter)}
                    onClick={() => handleLetterClick(letter)}
                    className={`${getLetterColor(letter)} hover:opacity-80 text-gray-800 font-bold rounded-xl p-4 text-3xl cursor-pointer shadow-md transform transition-all duration-200 hover:scale-105 active:scale-95 border-2 border-white hover:border-indigo-300`}
                  >
                    <div className="text-center">
                      <div className="text-3xl font-bold">{letter.toLowerCase()}</div>
                      <div className="text-base opacity-75 mt-1">/{letterSounds[letter]}/</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </>
        ) : (
          /* 练习版 */
          <div className="bg-white rounded-2xl shadow-xl p-8 mb-8">
            {/* 练习版拼词区域 */}
            <div className="flex flex-col items-center mb-6">
              {/* 拼词显示区域 - 蓝红蓝背景色 */}
              <div className="flex space-x-3 mb-4 justify-center">
                {[0, 1, 2].map((index) => (
                  <div
                    key={index}
                    className={`w-20 h-20 border-2 ${
                      index === 0 || index === 2 ? 'border-blue-400 bg-blue-100' : 'border-red-400 bg-red-100'
                    } flex items-center justify-center text-3xl font-bold cursor-pointer transition-all duration-200 hover:bg-gray-50 rounded-lg shadow-md`}
                    onClick={() => freeWord[index] && removeLetter(index)}
                  >
                    {freeWord[index] || (
                      <span className="text-gray-400 text-2xl">_</span>
                    )}
                  </div>
                ))}
              </div>

              {/* 当前单词显示 - 始终显示按钮 */}
              <div className="text-center mb-4">
                <div className="text-xl text-gray-700 mb-2" style={{ height: '60px' }}>
                  <div className="flex items-center justify-center">
                    <span className="font-bold text-indigo-700 text-2xl">{freeWord || "___"}</span>
                    {/* 听发音内容版块移动到清空版块左侧 */}
                    <button
                      onClick={() => freeWord && playWordPronunciation(freeWord)}
                      className="bg-yellow-500 hover:bg-yellow-600 text-white px-3 py-1 rounded-lg font-semibold transition-colors duration-200 ml-4 text-sm mr-2"
                      disabled={!freeWord}
                    >
                      🎵 听发音
                    </button>
                    <button
                      onClick={resetGame}
                      className="bg-gray-500 hover:bg-gray-600 text-white px-3 py-1 rounded-lg font-semibold transition-colors duration-200 text-sm"
                    >
                      🔄 清空
                    </button>
                  </div>
                </div>
                {/* 反馈信息 */}
                {showFeedback && (
                  <div className="mt-2 px-4 py-2 bg-red-100 text-red-700 rounded-lg text-sm">
                    这个单词是无意义单词，不发音
                  </div>
                )}
              </div>
            </div>

            {/* 字母网格 - 高度改为2/3 */}
            <div className="grid grid-cols-7 gap-3">
              {Object.keys(letterSounds).map((letter) => (
                <div
                  key={letter}
                  draggable
                  onDragStart={(e) => handleDragStart(e, letter)}
                  onClick={() => handleLetterClick(letter)}
                  className={`${getLetterColor(letter)} hover:opacity-80 text-gray-800 font-bold rounded-xl p-3 text-3xl cursor-pointer shadow-md transform transition-all duration-200 hover:scale-105 active:scale-95 border-2 border-white hover:border-indigo-300`}
                  style={{ height: '80px' }}
                >
                  <div className="text-center">
                    <div className="text-3xl font-bold">{letter.toLowerCase()}</div>
                    <div 
                      className="text-base opacity-75 mt-1 cursor-pointer hover:underline"
                      onClick={(e) => {
                        e.stopPropagation();
                        playIpaSound(`/${letterSounds[letter]}/`);
                      }}
                    >
                      /{letterSounds[letter]}/
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>

      {/* Footer */}
      <footer className="text-center text-gray-500 text-sm mt-8">
        © 2025 虫妈LTR自然拼读
      </footer>
    </div>
  );
};

export default App;
```